<template>
    <view class="login-container">
        <view class="logo-section">
            <image :src="logoSrc" mode="aspectFit"></image>
        </view>
        <view class="form-section">
            <view class="input-group">
                <input 
                    type="number" 
                    v-model="phone" 
                    placeholder="请输入手机号" 
                    maxlength="11" 
                    class="input-item"
                />
            </view>
            <view class="input-group">
                <input 

                    v-model="password" 
                    placeholder="请输入密码" 
                    class="input-item"
                />
            </view>
            <button class="login-btn" @click="handleLogin">登录</button>
            <view class="register-link" @click="goToRegister">
                立即注册
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            logoSrc: require('@/static/imgs/assets/lanqiao-logo.svg'),
            phone: '19836131725',
            password: '123456',
            showPassword: false
        };
    },
    methods: {
        validatePhone() {
            const phoneReg = /^1[3-9]\d{9}$/;
            if (!this.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                });
                return false;
            }
            if (!phoneReg.test(this.phone)) {
                uni.showToast({
                    title: '手机号错误',
                    icon: 'none'
                });
                return false;
            }
            return true;
        },
        validatePassword() {
            if (!this.password) {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                });
                return false;
            }
            return true;
        },
        handleLogin() {
            if (!this.validatePhone() ||!this.validatePassword()) {
                return;
            }
            uni.request({
                url: 'http://localhost:3000/users',
                success: (res) => {
                    uni.hideLoading();
                    if (res.statusCode === 200) {
                        const users = res.data;
                        const user = users.find(u => u.phone === this.phone && u.password === this.password);
                        if (user) {
                            uni.setStorageSync('userInfo', JSON.stringify({
                                _id: user.id,
                                username: user.username,
                                phone: user.phone
                            }));
                            uni.setStorageSync('userId', user.id);
                            uni.setStorageSync('currentPhone', this.phone);
                            uni.showToast({
                                title: '登录成功',
                                icon:'success',
                                duration: 2000
                            });
                            setTimeout(() => {
                                uni.switchTab({
                                    url: '/pages/index/index'
                                });
                            }, 1000);
                        } else {
                            uni.showToast({
                                title: '手机号或密码错误',
                                icon: 'none'
                            });
                        }
                    } else {
                        uni.showToast({
                            title: '登录失败，请稍后再试',
                            icon: 'none'
                        });
                    }
                },
                fail: () => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '网络错误，请稍后再试',
                        icon: 'none'
                    });
                }
            });
        },
        goToRegister() {
            uni.navigateTo({
                url: '/pages/login/register'
            });
        }
    }
};
</script>

<style lang="scss">
.login-container {
    min-height: 100vh;
    background-color: #f4f4f4; /* 浅灰色背景 */
    padding: 80rpx; /* 增加内边距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo-section {
    display: flex;
    justify-content: center;
    padding: 50rpx 0;
}
.form-section {
    width: 100%;
    max-width: 600rpx; /* 限制表单最大宽度 */
    margin-top: 60rpx;
   .input-group {
        border-bottom: 2rpx solid #ccc; /* 更粗的下划线 */
        margin-bottom: 40rpx;
       .input-item {
            height: 100rpx;
            font-size: 36rpx;
            border: none;
            outline: none;
            padding-left: 10rpx; /* 输入框内边距 */
        }
    }
   .login-btn {
        background-color: #009688; /* 绿色按钮 */
        color: #fff;
        height: 100rpx;
        line-height: 100rpx;
        border-radius: 12rpx; /* 更大的圆角 */
        font-size: 36rpx;
        margin-top: 80rpx;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 按钮阴影 */
    }
   .register-link {
        text-align: center;
        margin-top: 50rpx;
        font-size: 32rpx;
        color: #007AFF;
        text-decoration: underline; /* 添加下划线 */
        &:hover {
            color: #0056b3;
        }
    }
}
</style>